<template>
    <div class="login">
        <div class="login-box">
            <div class="login-logo">
                <img src="../../assets/logo.png" alt="logo">
            </div>
            <el-form ref="loginFormRef"
                     :model="loginForm"
                     :rule="loginRules"
                     class="login-form">
<!--                用户名-->
                <el-form-item prop="name">
                    <el-input v-model="loginForm.username"
                              prefix-icon="iconfont icon-username"
                    ></el-input>
                </el-form-item>
<!--                密码-->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password"
                              type="password"
                              prefix-icon="iconfont icon-password"></el-input>
                </el-form-item>
<!--                button-->
                <el-form-item class="btn-item">
                    <el-button type="primary"
                    @click="login">登录</el-button>
                    <el-button type="info"
                    @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
  export default {
    name: "Login",
    data(){
      return {
        loginForm:{//登录表单数据
          username:undefined,
          password:undefined
        },
        loginRules:{//登录表单验证规则
          username:[
            {required:true,message:"请输入用户名",trigger:'blur'},
            {min:3,max:10,message: "用户名长度在3-10字符",trigger: 'blur'}
          ],
          password:[
            {required: true,message: "请输入密码",trigger: 'blur'},
            {min:6,max:15,message: "密码在6-15位",trigger: 'blur'}
          ]
        }
      }
    },
    methods:{
      login(){
        this.$refs.loginFormRef.validate(async valid=>{
          if(valid){
           const {data:res} = await this.$http.post('/login',this.loginForm);
           console.log(res);
           sessionStorage.setItem("Token",res.data.token);
           if(res.meta.status !== 200){
             this.$message({
               type:"error",
               message:res.meta.msg,
             })
           }else{
             this.$message({
               type:"success",
               message:res.meta.msg
             })
             this.$router.push("/home");
           }
          }else{
            this.$message({
              type:'warning',
              message:"请输入正确的信息"
            })
            return
          }
        })
      },
      resetLoginForm(){
        this.$refs.loginFormRef.resetFields();
      }
    }
  }
</script>

<style lang="less" scoped>
.login {
    background-color: #2d4d6e;
    height: 100%;
}
    .login-box{
        width: 450px;
        height: 300px;
        background-color: white;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        .login-logo{
            width: 130px;
            height: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            };
        }
    }
    .login-form{
        padding: 10px;
        position: absolute;
        bottom: 10px;
        width: 90%;
    }
    .btn-item{
        display: flex;
        justify-content: flex-end;
    }
</style>
